import { useState } from "react";
import SvgIcon from '../../Components/SvgIcon'
import TxtChartExt from "./TxtChartExt";
function TxtChart(props) {
  const [txtInput,setTxtInput] = useState('')

  const onTextInput = (e) => {
    if(e.nativeEvent.data === null && e.target.innerHTML.indexOf('<p><br></p>') !== -1 && e.target.textContent.trim() !== ''){
      props.onSend(e.target.textContent);
      e.target.innerHTML = `<p data-placeholder="给“${props.model}”发送消息" class="placeholder"></p>`;
      setTxtInput("");
      return;
    }
    if (e.target.textContent.length === 0) {
      e.target.innerHTML = `<p data-placeholder="给“${props.model}”发送消息" class="placeholder"></p>`;
      setTxtInput("");
      return;
    } else {
      e.target.firstChild.removeAttribute("data-placeholder");
      e.target.firstChild.removeAttribute("class");
    }
    setTxtInput(e.target.textContent);
  };

  return <div
  className="w-full"
  type="button"
  aria-haspopup="dialog"
  aria-expanded="false"
  aria-controls="radix-:R7jkkuiiklj5:"
  data-state="closed"
>
  <div className="relative flex h-full max-w-full flex-1 flex-col">
    <div className="group relative flex w-full items-center">
      <div className="w-full">
        <div id="composer-background" className="flex w-full cursor-text flex-col rounded-3xl px-2.5 py-1 transition-colors contain-inline-size bg-[#f4f4f4] dark:bg-token-main-surface-secondary st-vt-composer">
          <div className="flex min-h-[44px] items-start pl-2">
            <div className="min-w-0 max-w-full flex-1">
              <div className="_prosemirror-parent_cy42l_1 text-token-text-primary max-h-[25dvh] overflow-auto default-browser">
                <div
                  contentEditable={props.state === 'listen'}
                  suppressContentEditableWarning
                  translate="no"
                  className="ProseMirror"
                  id="prompt-textarea"
                  data-virtualkeyboard="true"
                  onInput={onTextInput}
                >
                  <p data-placeholder={"给“"+props.model+"”发送消息"} className="placeholder"></p>
                </div>
              </div>
            </div>
            <div className="w-[32px] pt-1"></div>
          </div>
          <div className="flex h-[44px] items-center justify-between">
            <div className="flex gap-x-1 text-token-text-primary">
              <TxtChartExt />
            </div>
            <div className="flex gap-x-1">
              {props.state === 'speak' && <div >
                <button aria-label="停止流式传输" data-testid="stop-button" className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary bg-black text-white dark:bg-white dark:text-black disabled:bg-[#D7D7D7]" >
                  <SvgIcon icon="stop" />
                </button>
              </div>} 
              {props.state !== 'speak' && <span className="" data-state="closed">
                <button
                  disabled={!props.init && (txtInput.length === 0 || props.state==='wait')}
                  aria-label="发送提示"
                  data-testid="send-button"
                  onClick={()=>props.onSend(txtInput)}
                  className="flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:opacity-70 focus-visible:outline-none focus-visible:outline-black disabled:text-[#f4f4f4] disabled:hover:opacity-100 dark:focus-visible:outline-white disabled:dark:bg-token-text-quaternary dark:disabled:text-token-main-surface-secondary bg-black text-white dark:bg-white dark:text-black disabled:bg-[#D7D7D7]"
                >
                  
                  {(props.init && txtInput.length === 0)?<SvgIcon icon="voice" />:<SvgIcon icon="send" width="32" height="32" viewBox="0 0 32 32" className="icon-2xl" />}
                </button>
              </span>}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
}

export default TxtChart;